<template>
  <!-- ===== 查询表单 ===== -->
  <a-form
    :model="formSearchParams"
    :style="{ marginBottom: '20px' }"
    layout="inline"
    @submit="doSearch"
  >
    <!--    <a-form-item field="path" label="请求路径">-->
    <!--      <a-input v-model="formSearchParams.path" placeholder="支持模糊查询" allow-clear />-->
    <!--    </a-form-item>-->
    <!--    <a-form-item field="ip" label="IP">-->
    <!--      <a-input v-model="formSearchParams.ip" placeholder="精准匹配" allow-clear />-->
    <!--    </a-form-item>-->
    <!--    <a-form-item>-->
    <!--      <a-button type="primary" html-type="submit" style="width: 100px">-->
    <!--        搜索-->
    <!--      </a-button>-->
    <!--    </a-form-item>-->
  </a-form>

  <!-- ===== 数据表格 ===== -->
  <a-table
    :columns="columns"
    :data="dataList"
    :pagination="{
      showTotal: true,
      pageSize: searchParams.size,
      current: searchParams.current,
      total,
    }"
    @page-change="onPageChange"
  >
    <template #createTime="{ record }">
      {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { listApiLogByPageUsingPost } from "@/api/apiLogController";
import API from "@/api";
import message from "@arco-design/web-vue/es/message";
import { dayjs } from "@arco-design/web-vue/es/_utils/date";

/* ---------- 1. 查询参数 ---------- */
const formSearchParams = ref<API.PageApiLog_>({});

/* 默认分页参数 */
const initSearchParams = { current: 1, size: 20 };
const searchParams = ref<API.PageApiLog_>({ ...initSearchParams });

/* ---------- 2. 表格数据 ---------- */
const dataList = ref<API.ApiLog[]>([]);
const total = ref<number>(0);

/* ---------- 3. 加载数据 ---------- */
const loadData = async () => {
  const res = await listApiLogByPageUsingPost(searchParams.value);
  if (res.data.code === 0) {
    dataList.value = res.data.data?.records || [];
    total.value = res.data.data?.total || 0;
  } else {
    message.error("获取日志失败：" + res.data.message);
  }
};

/* ---------- 4. 搜索 ---------- */
const doSearch = () => {
  searchParams.value = { ...initSearchParams, ...formSearchParams.value };
};

/* ---------- 5. 分页 ---------- */
const onPageChange = (page: number) => {
  searchParams.value.current = page;
};

/* ---------- 6. 监听搜索条件变化自动加载 ---------- */
watchEffect(loadData);

/* ---------- 7. 表头 ---------- */
const columns = [
  { title: "ID", dataIndex: "id", width: 80 },
  {
    title: "时间",
    dataIndex: "createTime",
    slotName: "createTime",
    width: 180,
  },
  { title: "路径", dataIndex: "path" },
  { title: "IP", dataIndex: "ip", width: 120 },
  { title: "参数", dataIndex: "params" },
  { title: "耗时(ms)", dataIndex: "cost", width: 100 },
];
</script>

<style scoped>
/* 你可以根据需要微调样式 */
</style>
